<template>
	<div class="layout">
		<!-- 头部 -->
		<div class="top flex flex-y flex-between">
			<h3>成绩录入系统</h3>
			<i class="el-icon-switch-button" @click="exit()"></i>
		</div>
		<div class="flex">
			<!-- 菜单 -->
			<menus></menus>
			<!-- 容器 -->
			<div class="view">
				<router-view />
			</div>
		</div>
	</div>
</template>

<script>
import menus from '@/components/menu.vue'
export default {
	components:{
		menus
	},
	data () {
		return {
			
		}
	},
	methods:{
		// 退出登录
		exit(){
			this.$confirm('确定要退出登录吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
			.then(res=>{
				localStorage.clear();
				sessionStorage.clear();
				this.$router.push('/login')
			})
		}
	},
	mounted(){
		
	}
}
</script>

<style lang="scss" scoped>
	.layout{
		.top{
			padding: 20px 24px;
			background-color: #fff;
			border-bottom: 1px solid #e6e6e6;
			h3{
				color: $black;
			}
			i{
				cursor: pointer;
				font-size: 20px;
				transition: all 0.3s;
			}
			i:hover{
				color: $red;
			}
		}
	}
	.view{
		padding: 30px;
		margin: 15px;
		width: calc(100% - 210px);
		background-color: #fff;
		box-sizing: border-box;
	}
</style>